<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

  <!-- Bootstrap -->
  <link href="/css/bootstrap.min.css?v=4" rel="stylesheet">
  <link href="/css/tooltipster/tooltipster.css?v=4" rel="stylesheet">
  <link href="/js/jquery-ui/jquery-ui.min.css?v=4" rel="stylesheet">
  <link href="/js/facebox/facebox.css" rel="stylesheet">
  <link href="/css/reg.css?v=8" rel="stylesheet">
  <script type="text/javascript" src="/js/jquery.js?v=4"></script>
  <!--<script type="text/javascript" src="/js/bower_components/lodash/dist/lodash.min.js?v=4"></script>-->

  <script src="/js/facebox/facebox.js"></script>
  <script src="/js/app.js"></script>

</head>
<body>
  <div class="container">
    <div class="login-container">
      <div class="login-box">

        <ul class="nav">
          <li class="active">
            <a href="register.html">注册</a>
          </li>
          <li>
            <a href="/login">登陆</a>
          </li>
        </ul>
        <form id="regForm" th:action="@{/register}" th:method="post">
          <div class="login-inner-box">
            <ul>
              <li>
                <input type="text" name="username" placeholder="用户名" style="width:100%">
              </li>
              <li>
                <input type="text" id="mobile" name="mobile" placeholder="手机号码" style="width:100%">
              </li>
              <li>
                <input type="password" name="password" placeholder="密码" autocomplete="new-password">
              </li>
              <li>
                <input type="text" id="company_name" name="companyName" placeholder="公司名称" >
              </li>
              <li>
                <input type="text" id="app_id" name="appid" placeholder="appid" style="width:100%">
              </li>
              <li>
                <input type="text" id="app_secret" name="appsecret" placeholder="appsecret" style="width:100%">
              </li>
            </ul>
          </div>

          <div style="font-size: 12px;margin-top:20px">
            <label><input checked type="checkbox" id="agreement" onclick="click_agreement(this)"> 我已经阅读并同意</label> <a  href="javascript:alert('待续...')" class="agreement">《饭否服务协议》</a>
          </div>

          <input id="btn_submit" class="btn btn-primary btn-submit" type="submit" value="注册">
        </form>
      </div>
    </div>
  </div>
  <script th:inline="javascript">

    function click_agreement(obj) {
      var btn = $("#btn_submit");
      if(obj.checked) {
        btn.prop('disabled', false).removeClass("disabled");
      } else {
        btn.prop('disabled', true).addClass("disabled");
      }
    }

    var validateMessage = {
      "username": {
        "default": "请填写您的昵称,",
        "error": "请填写昵称"
      },
      "mobile": {
        "default": "请填写您的手机号，",
        "error": "请填写手机"
      },
      "password": {
        "default": "支持字母、数字及常用符号，不允许有空格。",
        "error": "请填写密码"
      },
      "companyName": {
        "default": "公司名称",
        "error": "请填写公司名"
      },
      "appid": {
        "default": "微信公众号的app id",
        "error": "请填写appid"
      },
      "appsecret": {
        "default": "微信公众号的app secret。",
        "error": "请填写app secret"
      },
    };

    function validate(obj) {
      var messages = validateMessage;
      var name = $(obj).attr("name");
      var valid = true;
      var items = $("#regForm").serializeArray();
      $.each(items, function(i, item) {
        if (item.name === name) {
          var checked = $.trim(item.value).length > 1;
          if (!messages[name] || !messages[name].error) {
            checked = true;
          }
          if (!checked) {
            alert(messages[name].error);
            valid = false;
          }


          //特殊处理
          if(checked) {
            if(name === "mobile") {
              var mobile = $.trim(item.value);
              if(!isValidPhone(mobile)) {
                alert("无效的手机号码");
                valid = false;
              }
            }
          }

        }

      });

      return valid;
    }

    $(function(){

      $("#regForm input").focus(function(){
        var name = $(this).attr("name");
      }).blur(function(){
        validate(this);
      });

      //make ajax post
      $("#regForm").ajaxForm({
        callback: function(data) {
           console.log(data);
          if (data.valid) {
            self.location.href = data.url;
          } else {
            alert(data.errorMsg);
          }
        },
        validate: function() {
          var results = [];
          $("#regForm input").each(function(){
            results.push(validate(this));
          });

          for (var i = 0; i < results.length; i++) {
            if(!results[i]) {
              return false;
            }
          }
          return true;
        }
      });

    });
  </script>

</body>

</html>
